<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>算法试验</title>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
    <h2>第一题</h2>
    <h3><p>试验一：统计求最大、最小元素的平均比较次数</p></h3>
    <p style="width: 100%">编写一个程序，随机产生10个1~20的整数，设计一个高效算法找其中的最大元素和最小元素，并统计元素之间的比较次数。调用该算法执行10次并求元素的平均比较次数。</p>
    <button @click="runThisButton(1)">执行</button>
    <div v-html="experiment1"></div>

    <h2>第二题</h2>
    <h3><p>逆置单链表</p></h3>
    <p style="width: 100%">对于不带头结点的单链表L,设计一个递归算法逆置所有节点。编写完整的实验程序，并采用相应数据进行测试。</p>
    <button @click="runThisButton(2)">执行</button>
    <div v-html="experiment2"></div>

    <h2>第三题</h2>
    <h3><p>求解查找假币问题</p></h3>
    <p style="width: 100%">编写一个程序查找假币问题。有n（n>3)个硬币，其中有一个假币，且假币较轻，采用天平称重的方式找到这个假币，并给出操作步骤。</p>
    <button @click="runThisButton(3)">执行</button>
    <div v-html="experiment3"></div>

    <h2>第四题</h2>
    <h3><p>找下界</p></h3>
    <p style="width: 100%">编写一个程序计算根号n的向下取整（根号n的下界，如2.8的下界是2），其中n是任意正整数，要求除了赋值和比较运算，该算法只能用到基本四则运算，并输出1~20的求解结果。</p>
    <button @click="runThisButton(4)">执行</button>
    <div v-html="experiment4"></div>

    <h2>第五题</h2>
    <h3><p>12个硬币含一个假币</p></h3>
    <p style="width: 100%">有12个硬币，分别用A到L表示，其中恰好有一个假币，假币的重量不同于真币，所有真币的重量相同。现在采用天平称重的方式找到这个假币，某人已经给了一种3次称重的方案。编写一个程序 找到这个假币。</p>
    <button @click="runThisButton(5)">执行</button>
    <div v-html="experiment5"></div>

    <h2>第六题</h2>
    <h3><p>0-1背包问题</p></h3>
    <p style="width: 100%">背包的重量是6，有以下四种货物：1：重量5，价值4；2：重量3，价值4；3：重量2，价值3；4：重量1，价值1；问那种方式在不超过重量的情况下价值最大化。</p>
    <button @click="runThisButton(6)">执行</button><br>
    <div v-html="experiment6"></div>

    <h2>第七题</h2>
    <h3><p>是否是子串</p></h3>
    <p style="width: 100%">判断是否为"ilikealgorithmverymuchforeverhhhhha"的子串，默认串是like</p>
    <button @click="runThisButton(7)">执行</button>
    <input v-model="message" placeholder="请输入子串"> <button @click="toFindIsChildString()">执行输入子串的方法</button>
    <div v-html="experiment7"></div>

    <h2>第八题</h2>
    <h3><p>N皇后问题</p></h3>
    <p style="width: 100%">如何能够在 N×N 的国际象棋棋盘上放置N个皇后，使得任何一个皇后都无法直接吃掉其他的皇后？</p>
    <input v-model="number" placeholder="请输入数量"> <button @click="toRunTheQue()">执行N皇后问题</button>
    <div v-html="experiment8"></div>

</div>
<div style="height: 80px"></div>
</body>
<script type="text/javascript">
    var myVue = new Vue({
        el: "#app",
        data: {
            message:'',
            number:'',
            experiment1: '',
            experiment2: '',
            experiment3: '',
            experiment4: '',
            experiment5: '',
            experiment6: '',
            experiment7: '',
            experiment8:'',
        },
        methods: {
            runThisButton(i) {
                var that = this;
                axios.get('http://localhost:8080' + '/experiment' + i, {})
                    .then(function (response) {
                        switch (i) {
                            case 1:
                                that.experiment1 = response.data;
                                break;
                            case 2:
                                that.experiment2 = response.data;
                                break;
                            case 3:
                                that.experiment3 = response.data;
                                break;
                            case 4:
                                that.experiment4 = response.data;
                                break;
                            case 5:
                                that.experiment5 = response.data;
                                break;
                            case 6:
                                that.experiment6 = response.data;
                                break;
                            case 7:
                                that.experiment7 = response.data;
                                break;
                        }
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            toFindIsChildString(){
                var that = this;
                axios.get('http://localhost:8080' + '/experiment9?childString='+that.message, {})
                    .then(function (response) {
                        that.experiment7 = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            },
            toRunTheQue(){
                var that = this;
                axios.get('http://localhost:8080' + '/experiment8?number='+that.number, {})
                    .then(function (response) {
                        that.experiment8 = response.data;
                    })
                    .catch(function (error) {
                        console.log(error);
                    });
            }

        }
    })
</script>
</html>
